<template>
  <div class="order-info-container">
    <div class="order-info-item">
      <p class="order-info-title">整机</p>
      <div class="order-info">
        <div class="order-info-line" v-for="item in orderDetail?.productCategoryList" :key="item.id">
          <div class="order-info-line-item">
            <span>型号</span>
            <span>{{ infoHandler(item.productCategoryName) }}</span>
          </div>
          <div class="order-info-line-item">
            <span>名称</span>
            <span>{{ infoHandler(item.name) }}</span>
          </div>
          <div class="order-info-line-item">
            <span>工厂</span>
            <span>{{ getDictItem("productionFactory", item?.productionFactoryId) }}</span>
          </div>
          <div class="order-info-line-item">
            <span>控制器</span>
            <span>{{ controllerList.find((itm: any) => itm.id === item?.controllerId)?.name }}</span>
          </div>
          <div class="order-info-line-item">
            <span>数量</span>
            <span>{{ infoHandler(item.count) }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="order-info-item">
      <p class="order-info-title">配套硬件</p>
      <div class="order-info">
        <div
          class="order-info-line"
          v-for="item in (orderDetail?.orderMaterielList || []).filter(
            (item: any) => item.remark === getDictId('supportingHardware')
          )"
          :key="item.id"
        >
          <div class="order-info-line-item">
            <span>名称</span>
            <span>{{ infoHandler(item.name) }}</span>
          </div>
          <div class="order-info-line-item">
            <span>数量</span>
            <span>{{ infoHandler(item.count) }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="order-info-item">
      <p class="order-info-title">软件系统</p>
      <div class="order-info">
        <div
          class="order-info-line"
          v-for="item in (orderDetail?.orderMaterielList || []).filter(
            (item: any) => item.remark === getDictId('softwareSystems')
          )"
          :key="item.id"
        >
          <div class="order-info-line-item">
            <span>名称</span>
            <span>{{ infoHandler(item.name) }}</span>
          </div>
          <div class="order-info-line-item">
            <span>数量</span>
            <span>{{ infoHandler(item.count) }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="order-info-item">
      <p class="order-info-title">施工</p>
      <div class="order-info">
        <div
          class="order-info-line"
          v-for="item in (orderDetail?.orderMaterielList || []).filter((item: any) => item.remark === getDictId('construction'))"
          :key="item.id"
        >
          <div class="order-info-line-item">
            <span>名称</span>
            <span>{{ infoHandler(item.name) }}</span>
          </div>
          <div class="order-info-line-item">
            <span>数量</span>
            <span>{{ infoHandler(item.count) }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="order-info-item">
      <p class="order-info-title">服务</p>
      <div class="order-info">
        <div
          class="order-info-line"
          v-for="item in (orderDetail?.orderMaterielList || []).filter((item: any) => item.remark === getDictId('serve'))"
          :key="item.id"
        >
          <div class="order-info-line-item">
            <span>名称</span>
            <span>{{ infoHandler(item.name) }}</span>
          </div>
          <div class="order-info-line-item">
            <span>数量</span>
            <span>{{ infoHandler(item.count) }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { getProductCategoryPartAll } from "@/api/modules/carType"; // getProductModelList
import { useDict } from "@/hooks/useDict";
const { getDictItem, getDictId } = useDict(["productionFactory"]);
const { orderDetail } = defineProps({
  orderDetail: {
    type: Object,
    default: () => {}
  }
});
let controllerList = ref<any>([]);
// let productModelList = reactive<any>([]);

// 获取所有控制器
const getListAllControllerApi = async () => {
  const { data } = await getProductCategoryPartAll(
    {
      typeId: getDictId("control")
    },
    { noLoading: true }
  );
  controllerList.value = data || [];
};
// const getProductModelListFn = async () => {
//   const { data } = await getProductModelList();
//   productModelList = data;
// };
const infoHandler = (val: any) => {
  return val ? val : "--";
};
onMounted(() => {
  getListAllControllerApi();
  // getProductModelListFn();
});
</script>
<style lang="scss" scoped>
.order-info-container {
  height: 100%;
  overflow: auto;
  --border-color: #ebebeb;
  gap: 10px;
  padding-bottom: 10px !important;
  box-sizing: border-box;
  .order-info {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    &-title {
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    &-item {
      margin-bottom: 20px;
    }
    &-line {
      border: 1px solid var(--border-color);
      &-item {
        display: grid;
        align-items: center;
        grid-template-columns: 1fr 10fr;
        border-bottom: 1px solid var(--border-color);
        &:last-child {
          border-bottom: 0;
        }
        span {
          padding: 0px 10px;
          box-sizing: border-box;
          min-height: 40px;
          display: flex;
          align-items: center;
          height: 100%;
        }
        span:first-child {
          min-width: 80px;
          font-size: 14px;
          color: #666666;
          text-align: right;
          border-right: 1px solid var(--border-color);
          text-align: right;
          justify-content: flex-end;
        }
        span:last-child {
          font-size: 14px;
          color: #333333;
        }
      }
    }
  }
}
</style>
